<template>
  <div v-loading="loading" class="task-handler">
    <div v-show="flag">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">配置任务管理</el-breadcrumb-item>
          <el-breadcrumb-item v-if="flag">处理任务</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-if="flag">
          <el-button size="mini" @click="handleBack">取消</el-button>
          <el-button v-if="(formData.handleResult !== 'CREATION')" type="primary" size="mini" @click="handleSave">确定</el-button>
          <el-button v-if="(formData.handleResult === 'CREATION')" type="primary" size="mini" @click="clickNextStep">下一步</el-button>
        </div>
      </div>
      <c-list :column="4">
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="关联图纸" :to="{name:'ShopDrawingDetail', query:{id: picInfo.id, flag: 'taskDetail'}}" :value="formData.picTaskCode" />
        <c-list-item label="图纸名称" :value="formData.picTaskName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="formData.shopCityLevel" />
        <c-list-item label="门店市场层级" dict-type-code="MARKET_LEVEL" :value="formData.shopMarketLevel" />
        <c-list-item label="任务生成时间" :value="formData.createTime" />
        <c-list-item label="任务分配时间" :value="formData.distributeTime" />
        <c-list-item label="任务分配人" :value="formData.distributorName" />
      </c-list>
      <c-section title="任务处理">
        <c-form-container :column="2" :bottom="false">
          <el-form ref="rulesForm" :model="formData" :rules="formRules" label-width="140px">
            <el-form-item label="任务处理结果" prop="handleResult">
              <c-dict-select v-model="formData.handleResult" dict-type-code="PRO_CONFIG_HANDLE_RESULT" placeholder="任务处理结果" @change="changeResult" />
            </el-form-item>
            <el-form-item v-if="formData.handleResult === 'UPDATES'" label="待变更的产品配置单" prop="configSingle">
              <input-with-dialog
                v-model="formData.configSingle"
                placeholder="待变更的产品配置单"
                :props="{label:'configCode',value:'configCode'}"
                :multiple="false"
                :focus-query="true"
                :config="configSingleConfig"
                @change="changeConfigSingle"
              />
            </el-form-item>
            <el-form-item label="处理结果说明" prop="handleResulDesc" span="2">
              <el-input v-model="formData.handleResulDesc" type="textarea" :autosize="{minRows: 4}" placeholder="处理结果说明" />
            </el-form-item>
          </el-form>
        </c-form-container>
      </c-section>
    </div>
    <div v-if="!flag">
      <config-list :detail-data="activedData" @goBack="changePage" />
    </div>
  </div>
</template>

<script>
import { getTaskDetail, submitAllocationTask } from '@/api/proConfig'
import configList from './configList.vue'
export default {
  name: 'Handle',
  components: { configList },
  data() {
    return {
      loading: false,
      activedData: {},
      flag: true,
      formData: {
        configSingle: [],
        handleResult: ''
      },
      picInfo: {},
      formRules: {
        handleResult: [{ required: true, message: '请选择任务处理结果' }]
      },
      configSingleConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigSheet/page`,
        title: '待变更的产品配置单',
        method: 'post',
        setting: [
          {
            prop: 'configCode',
            title: '产品配置单号'
          },
          {
            prop: 'proConfigTypeDesc',
            title: '产品配置类型'
          },
          {
            prop: 'stateDesc',
            title: '产品配置进度'
          }
        ],
        filtersRaw: [{ 'id': 'isValid', 'property': 'isValid', 'operator': '=', 'value': 1 }]
      }
    }
  },
  created() {
    getTaskDetail(this.$route.params.id).then(res => {
      if (res.success) {
        this.formData = res.data
        this.picInfo = res.data.designPictureDtos[0]
        let filtersRaw = []
        const picArr = [{ 'id': 'picTaskCode', 'property': 'picTaskCode', 'operator': '=', 'value': this.formData.picTaskCode }]
        const obj = [{ 'id': 'constCode', 'property': 'constCode', 'operator': '=', 'value': this.formData.constCode },
          { 'id': 'proConfigType', 'property': 'proConfigType', 'operator': '=', 'value': this.formData.proConfigType }]
        let arr1 = []
        let arr2 = []
        if (this.formData.proConfigType === 'FINISHED' || this.formData.proConfigType === 'CUSTOMIZE' || this.formData.proConfigType === 'MATCHED_FINISHED' || this.formData.proConfigType === 'SANITARY') {
          arr1 = [{ 'id': 'schedule', 'property': 'schedule', 'operator': '=', 'value': 'A' }]
          filtersRaw = [...obj, ...picArr, ...arr1]
        } else if (this.formData.proConfigType === 'RESOURCES' || this.formData.proConfigType === 'ACCESSORY') {
          arr2 = [{ 'id': 'schedule', 'property': 'schedule', 'operator': '<>', 'value': 'H' }]
          filtersRaw = [...obj, ...arr2]
        }
        this.$set(this.configSingleConfig, 'filtersRaw', filtersRaw)
        let percode = ''
        if (this.formData.proConfigType === 'FINISHED') {
          percode = 'productconfigfinished'
        } else if (this.formData.proConfigType === 'CUSTOMIZE') {
          percode = 'customization'
        } else if (this.formData.proConfigType === 'MATCHED_FINISHED') {
          percode = 'environment'
        } else if (this.formData.proConfigType === 'SANITARY') {
          percode = 'bathroom'
        } else if (this.formData.proConfigType === 'ACCESSORY' || this.formData.proConfigType === 'RESOURCES') {
          percode = 'decoration'
        }
        const apiHeader = { 'Permission-Percode': percode, 'Permission-App': 'slm' }
        this.$set(this.configSingleConfig, 'apiHeader', apiHeader)
      }
    })
  },
  methods: {
    changeResult(value) {
      if (value === 'NO_PROCESSING') {
        const rules = [{ required: true, message: '请输入处理结果说明' }]
        this.$set(this.formRules, 'handleResulDesc', rules)
        this.$set(this.formRules, 'configSingle', undefined)
        this.$refs.rulesForm.clearValidate()
      } else if (value === 'UPDATES') {
        const configSingle = [{ required: true, message: '请选择待变更的产品配置单' }]
        this.$set(this.formRules, 'configSingle', configSingle)
        this.$set(this.formRules, 'handleResulDesc', undefined)
        this.$refs.rulesForm.clearValidate()
      }
    },
    changeConfigSingle(row) {
      if (row && row.length) {
        this.formData.configSingleCode = row[0].configCode
      }
    },
    clickNextStep() {
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          this.$confirm('是否确认保存并进入下一步?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true
            submitAllocationTask(this.formData).then(res => {
              if (res.success) {
                this.flag = !this.flag
                this.activedData = this.formData
                // this.activedData = res.data
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          })
        }
      })
    },
    handleSave() {
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          this.$confirm('是否确认保存?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true
            this.formData.schedule = 'C'
            submitAllocationTask(this.formData).then(res => {
              if (res.success) {
                this.$store.dispatch('views/goFirst')
                // this.flag = !this.flag
                // this.activedData = this.formData
                // this.activedData = res.data
              }
              this.loading = false
            }).catch(() => {
              this.loading = false
            })
          })
        }
      })
    },
    changePage() {
      this.flag = !this.flag
    },
    handleBack() {
      this.flag = false
      this.formData = {}
      this.$store.dispatch('views/goBack')
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
